<template>
  <div class="big-BBItem">
    <div class="container">
      <div class="header">
        <div class="header-left">
          <img
            src="https://s3plus.meituan.net/v1/mss_65766da973d14523b3d781fe3ac2bbac/www-assets/shared/images/logo/h-transparent-v584ea975.svg"
            alt=""
          />
        </div>
        <div class="header-right">
          <div>登录查看优惠价</div>
          <div>成为房东</div>
          <div>下载App</div>
        </div>
      </div>
    </div>
    <div class="img-introduce">
      <div class="img-introduce-left">
        <img
          src="https://p1.meituan.net/iphoenix/a2097ea40329122b2415bb5a3aedacae1237005.jpg@1500w_1000h_80Q_1e_1c"
          alt=""
        />
        <div class="img-access">
          <div class="img-access-top">超赞</div>
          <div class="img-access-middle">4.9</div>
          <div class="img-access-bottom">
            99条评论
            <i class="iconfont icon-xiangyou"></i>
          </div>
        </div>
      </div>
      <div class="img-introduce-right">
        <img
          src="https://p1.meituan.net/iphoenix/a2097ea40329122b2415bb5a3aedacae1237005.jpg@750w_500h_80Q_1e_1c"
          alt=""
        />
        <img
          src="https://img.meituan.net/phoenix/4670ffc2247ad2845abd417dec11d6c21578019.jpg@750w_500h_80Q_1e_1c"
          alt=""
        />
        <img
          src="https://p0.meituan.net/iphoenix/1df15232c50e13bbe7507e33b0beba44995137.jpg@750w_500h_80Q_1e_1c"
          alt=""
        />
        <img
          src="https://p0.meituan.net/iphoenix/d4cb3688d2ddd0f85a986486bf68a0fb1240863.jpg@750w_500h_80Q_1e_1c"
          alt=""
        />
        <div class="img-share"><i class="iconfont icon-fenxiang"></i> 分享</div>
        <div class="img-love"><i class="iconfont icon-aixin"></i> 993</div>
      </div>
    </div>
    <div class="container">
      <div class="briefIntroduction">
        <div class="item-1">
          <div class="briefIntroduction-item briefIntroduction-item-top-1">
            <div
              class="briefIntroduction-item-top briefIntroduction-item-top-1"
            >
              概览
            </div>
            <div class="briefIntroduction-item-bottom"><i>DETAIL</i></div>
          </div>
        </div>
        <div class="briefIntroduction-item briefIntroduction-item-top-2">
          <div class="briefIntroduction-item-top briefIntroduction-item-top-2">
            房东
          </div>
          <div class="briefIntroduction-item-bottom"><i>HOST</i></div>
        </div>
        <div class="briefIntroduction-item briefIntroduction-item-top-3">
          <div class="briefIntroduction-item-top briefIntroduction-item-top-3">
            位置
          </div>
          <div class="briefIntroduction-item-bottom"><i>LOCATION</i></div>
        </div>
        <div class="briefIntroduction-item briefIntroduction-item-top-4">
          <div class="briefIntroduction-item-top briefIntroduction-item-top-4">
            概览
          </div>
          <div
            class="
              briefIntroduction-item-bottom briefIntroduction-item-bottom-4
            "
          >
            <i>REVIEWS</i>
          </div>
        </div>
        <div class="briefIntroduction-item briefIntroduction-item-top-5">
          <div class="briefIntroduction-item-top briefIntroduction-item-top-5">
            设施
          </div>
          <div class="briefIntroduction-item-bottom"><i>AMENITIES</i></div>
        </div>
      </div>
      <div class="regionBB">
        <div class="regionBB-text">厦门民宿>厦门集美区民宿</div>
        <div class="introduce-text">
          【清新大床房】万科云城【华大西门】集美创意城，brt大学城站，世贸ioi商城对面
          近北站，交通便利进岛方便 美食小吃云集
        </div>
        <div class="introduce-details">
          <div class="introduce-item">品质民宿</div>
          <div class="introduce-item">超赞房东</div>
          <div class="introduce-item">寄存行李</div>
          <div class="introduce-item">洗衣机</div>
          <div class="introduce-item">宽松取消</div>
          <div class="introduce-item">可开发票</div>
          <div class="introduce-item">有电梯</div>
          <div class="introduce-item">书桌</div>
          <div class="introduce-item">冰箱</div>
          <div class="introduce-item">允许聚会</div>
        </div>
      </div>
      <div class="container container-bottom">
        <div class="fixed-right">
          <div class="right-price">
            <em>￥<i>100</i></em
            >/晚
          </div>
          <div class="input-date">
            <el-date-picker
              class="date-picker"
              v-model="value2"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :shortcuts="shortcuts"
              :size="large"
            />
          </div>
          <select name="" id="">
            <option value=""></option>
          </select>
          <div class="right-notify">可住2人，不可加客</div>
          <div class="button-reserve">
            <div class="button-reserve-left">
              <i class="iconfont icon-chakantiezihuifu"></i>
              <div>联系房东</div>
            </div>
            <div class="button-reserve-right">立即预定</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BBItem",
};
</script>

<script setup>
import { ref } from "vue";
const value2 = ref("");
const shortcuts = [
  {
    text: "Last week",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "Last month",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "Last 3 months",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];
</script>

<style scoped>
.big-BBItem {
  background-color: #f5f6fa;
}
.header {
  width: 1200px;
  height: 70px;
  line-height: 70px;

  border-radius: 10px 10px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.header-left {
  font-size: 24px;
  font-weight: 560;
}
.header-left img {
  margin-left: 30px;
  height: 30px;
  position: absolute;
  bottom: 20px;
}
.header-right {
  font-size: 15px;
  color: #585a5a;
  width: 260px;
  margin-right: 20px;
  display: flex;
  justify-content: space-around;
}
/* 图片展示 */
.img-introduce {
  position: relative;
  display: flex;
}

.img-introduce-left img {
  width: 727px;
}
.img-introduce-right {
  position: relative;
  margin: 0;
  height: 400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.img-introduce-right img {
  width: 390px;
  height: 239.5px;
  margin-left: 5px;
  margin-bottom: 5px;
}
.img-share {
  text-align: center;
  position: absolute;
  right: 92px;
  top: 12px;
  font-size: 14px;
  color: #ffffff;
  width: 65px;
  height: 30px;
  line-height: 28px;
  border-radius: 20px;
  background-color: #383634;
}
.img-love {
  text-align: center;
  font-size: 14px;
  position: absolute;
  right: 20px;
  top: 12px;
  width: 65px;
  height: 30px;
  line-height: 28px;
  border-radius: 20px;
  background-color: #a3a3a3;
}
.img-access {
  width: 88px;
  height: 150px;
  border: 1px solid transparent;
  border-radius: 5px;
  background-color: RGB(52, 47, 44, 0.9);
  color: #ffffff;
  position: absolute;
  left: 629px;
  bottom: 12px;
  text-align: center;
}
.img-access-top {
  height: 44px;
  line-height: 44px;
  width: 60px;
  margin: 0 15px;
  border-bottom: 1px solid #595754;
}
.img-access-middle {
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  font-weight: 560;
  width: 60px;
  margin: 0 15px;
  border-bottom: 1px solid #595754;
}
.img-access-bottom {
  height: 42px;
  line-height: 42px;
  margin-left: 6px;
}
.img-introduce-right iconfont {
  position: absolute;
  top: 2px;
}
/* 介绍 */
.briefIntroduction {
  display: flex;
  color: #7d7e80;
  text-align: center;
  padding: 10px 5px;
  border-bottom: 1px solid #7d7e80;
}
.briefIntroduction-item {
  width: 60px;
  text-align: center;
  margin-right: 40px;
  position: relative;
}
.briefIntroduction-item-top {
  font-size: 14px;
  padding-bottom: 3px;
}
.briefIntroduction-item-bottom {
  margin-top: 3px;
  font-size: 12px;
}

.item-1:hover .briefIntroduction-item-top-1::after {
  content: "";
  width: 35px;
  border-bottom: 3px solid #7d7e80;
  position: absolute;
  bottom: -12px;
  left: 12px;
}
.regionBB {
  margin: 10px;
}
.regionBB-text {
  font-size: 12px;
  color: #7d7e80;
}
.introduce-text {
  padding: 10px 0;
  font-size: 18px;
  font-weight: 560;
}
.introduce-details {
  color: #6b7999;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.introduce-item {
  padding: 3px;
  background-color: #ffffff;
  border: 1px solid white;
  margin-right: 10px;
}
.container-bottom {
  position: relative;
  height: 700px;
}
.fixed-right {
  position: absolute;
  right: 105px;
  width: 300px;
  height: 500px;
}
</style>